<template>
  <div class="userinfo">
    <div class="user">
      <div class="picture">
        <img :src="userinfo.picture || '/static/image/picture/用户头像.png'" :alt="userinfo.name" :title="userinfo.name">
        <attention-vue @isAttention="isAttention=true" :username="userinfo.username" :isAttention="isAttention" class="attention"></attention-vue>
      </div>
      <p>
        <span>{{userinfo.name}}</span>
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="sexIcon"></use>
        </svg>
      </p>
      <p>
        <span>{{userinfo.constellation}}</span>
        <span>{{userinfo.age + "岁"}}</span>
      </p>
    </div>
    <ul class="user_list">
      <li v-for="(item,index) in userData" :key="index">
        <p>{{item.title}}</p>
        <p>{{item.val}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import attentionVue from "./mini/attention.vue"
export default {
  name: 'UserMessage',

  data() {
    return {
      userinfo: {}, // 用户信息
      userData: [], // 用户数据
      isAttention: false, // 是否被关注
    };
  },

  computed: {
    sexIcon(){
      return this.userinfo.sex == '男' ? '#icon-xingbienan' : '#icon-xingbienv'
    },
    isLogin(){
      return this.$store.state.isLogin
    }
  },

  props: {
    username: {
      type: String,
      default: ''
    }
  },

  watch: {
    username: 'init',
    isLogin: 'init'
  },

  methods: {
    // 初始化
    init(){
      if(!this.username || this.username.trim() == ''){
        return
      }
      this.$api.getUserData({username: this.username}).then(res => {
        this.userinfo = {...res.data}
        this.userData = [
          {title:'话题',val:this.userinfo.topicsCount},
          {title:'访问量',val:this.userinfo.visitCount},
          {title:'关注度',val:this.userinfo.attentionCount},
          {title:'文章',val:this.userinfo.articleCount},
          {title:'获赞数',val:this.userinfo.likeCount},
          {title:'社龄',val:this.siteAge(this.userinfo.siteAge)}
        ],
        this.isAttention = res.data.isAttention
      })
    },
    // 设置网龄
    siteAge(time){
      var total = (new Date().getTime() - new Date(time).getTime())/1000
      let day = parseInt(total/(60*24*60))
      switch(true){
        case day < 1: total = '不足一天';break;
        case day >=1 && day < 30: total = day + '天';break;
        case day >= 30 && day < 365: total = parseInt(day/30) + '个月';break;
        case day >= 365: total = parseInt(day/365) + '年' + parseInt(day%365/30) + '个月';break;
      }
      return total 
    },
  },
  components: {
    attentionVue
  }
};
</script>

<style scoped>
.userinfo{
  display: flex;
  padding: 10px;
  align-content: center;
  background-image: url('../../assets/image/userBG.jpg');
  background-size: cover;
}
.userinfo .user{
  display: flex;
  width: 100px;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
}
.userinfo .user span{
  margin: 0 4px;
}
.user .icon{
  font-size: 1rem;
}
.userinfo .user img{
  width: 66px;
  height: 66px;
  border-radius: 50%;
}
.userinfo .user_list{
  display: flex;
  width: 180px;
  flex-wrap: wrap;
}
.userinfo .user_list li p:nth-child(2){
  font-size: 0.7rem;
  color: gray;
}
.userinfo .user_list li{
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}
.user .picture{
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.picture .attention{
  margin-top: -15px;
}
</style>